<template>
  <div>
    <div class="w1200">
      <div class="search">
        <el-input :placeholder="$t('搜索')" prefix-icon="el-icon-search" clearable v-model="searchValue"
          @input="searchChange">
        </el-input>
      </div>
      <div class="cont">
        <div class="l">
          <div :class="['item', key === current ? 'active' : '']" v-for="(item, key) in serviceList" :key="key"
            @click="parentClick(key)">
            <span>{{ $t(key) }}</span>
            <span>&gt;</span>
          </div>
        </div>
        <div class="m">
          <div class="item active" :class="[ruleForm.serviceId === item.serviceId ? 'active' : '']"
            v-for="(item, index) in serviceChildList" :key="index" @click="serviceClick(item)">
            <div class="text">
              <div class="t1">{{ item.serviceId }}</div>
              <div class="t2">{{ $t(item.serviceName) }}</div>
            </div>
            <div class="box">
              <div class="b b1">{{ $t("积分") }}{{ item.price }}</div>
              <div class="b b2">{{ item.time }}</div>
            </div>
          </div>
        </div>
        <div class="r">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
            <el-form-item prop="serviceId">
              <div class="r-01">
                <div class="icon">
                  <span>{{ $t("已选择的服务") }}</span>
                </div>
                <div class="select">
                  <el-select v-model="ruleForm.serviceId" filterable :placeholder="$t('请选择服务')" style="width: 100%">
                    <el-option-group v-for="(group, key) in serviceList" :key="key" :label="key">
                      <el-option v-for="item in group" :key="item.serviceId"
                        :label="item.serviceId + ' ' + item.serviceName" :value="item.serviceId" />
                    </el-option-group>
                  </el-select>
                </div>
              </div>
            </el-form-item>
            <el-form-item prop="serviceNumber">
              <el-input type="textarea" v-model="ruleForm.serviceNumber" :rows="6" :placeholder="$t('请输入IMEI，换行可输入多个，手机端使用回车键进行换行')
                "></el-input>
            </el-form-item>
            <el-form-item prop="desc">
              <div class="r-01">
                <div class="icon">
                  <span>{{ $t("订单备注") }}（{{ $t("可选") }}）</span>
                </div>
                <div class="select">
                  <el-input :placeholder="$t('如客户信息、设备码')" v-model="ruleForm.desc"></el-input>
                </div>
              </div>
            </el-form-item>
            <div class="r-02">
              {{ $t("需要消耗积分") }}：<span>{{ ruleForm.jifen }}</span>
            </div>
            <div class="r-03" :style="{ opacity: checked ? '1' : '.6' }" @click="submit">
              <img src="@/assets/images/submit_icon_03.png" alt="" />
              <span>{{ $t("提交订单") }}</span>
            </div>
            <div class="r-04">
              <el-checkbox v-model="checked">
                <span style="color: red; font-size: 14px">{{
                  $t("我已查看服务说明并同意上述条款")
                  }}</span>
              </el-checkbox>
            </div>
            <div class="r-05">
              <div class="btn">{{ $t("温馨提示") }}</div>
              <div class="t t1" v-html="descriptionTemplate"></div>
              <!-- <div class="t t1">
                {{ $t('设备型号以及是否打开了"查找我的iPhone";') }}
              </div>
              <div class="t t1">
                {{ $t("此服务不支持查询MacBook笔记本或电脑;") }}
              </div>
              <div class="t t1">
                {{ $t("如需查询MacBook请使用1127专用服务;") }}
              </div> -->
              <!-- <div class="t t2">
                {{ $t("本服务为实时服务,不支持取消或者退积分;") }}
              </div>
              <div class="t t3">
                {{ $t("本服务返回数据仅供参考;仅为手机维修从业者提供参考;") }}
              </div> -->
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import apiService from "@/api/apiService";
import { isMobile } from "@/utils";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "ServiceList",
  data() {
    return {
      timer: null,
      searchValue: "",
      serviceList: [],
      serviceChildList: [],
      allServiceList: [],
      current: "",
      ruleForm: {
        serviceId: "",
        desc: "",
        jifen: 0,
        serviceNumber: "",
      },
      checked: false,
      rules: {
        serviceId: [
          { required: true, message: this.$t("请选择服务"), trigger: "change" },
        ],
        serviceNumber: [
          {
            required: true,
            message: this.$t("请输入订单内容"),
            trigger: "blur",
          },
        ],
        descriptionTemplate: "",
      },
    };
  },
  components: {},
  computed: {
    mobile() {
      return isMobile();
    },
  },
  mounted() {
    this.getData();
    const { parents, serviceId } = this.$route.query;
    if (parents) {
      this.current = parents;
    }
    if (serviceId) {
      this.ruleForm.serviceId = serviceId;
    }
  },
  watch: {
    "ruleForm.serviceId": {
      handler() {
        this.setJf();
      },
    },
  },
  methods: {
    getData() {
      apiService.get("/all-service", {}).then((res) => {
        this.allServiceList = res.data;
        this.serviceList = this.groupedByParent(res.data);
        this.current = this.current
          ? this.current
          : Object.keys(this.serviceList)[0];
        this.serviceChildList = this.serviceList[this.current];
        this.setJf();
      });
    },
    groupedByParent(list) {
      return list.reduce((acc, item) => {
        const key = item.parent;
        if (!acc[key]) {
          acc[key] = [];
        }
        acc[key].push(item);
        return acc;
      }, {});
    },
    parentClick(key) {
      this.current = key;
      this.serviceChildList = this.searchFilter(
        this.serviceList[key],
        this.searchValue
      );
    },
    serviceClick(item) {
      this.ruleForm.serviceId = item.serviceId;
      this.$message.success("已选择 [" + item.serviceName + "]");
    },
    searchChange(val) {
      if (val === "") {
        this.parentClick(Object.keys(this.serviceList)[0]);
        return;
      }
      if (this.timer) clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.current = "";
        this.serviceChildList = this.searchFilter(this.allServiceList, val);
      }, 500);
    },
    searchFilter(arr, key) {
      return arr.filter(
        (u) => u.serviceId.includes(key) || u.serviceName.includes(key)
      );
    },
    setJf() {
      if (this.ruleForm.serviceId) {
        const obj = this.allServiceList.find(
          (u) => u.serviceId === this.ruleForm.serviceId
        );
        this.ruleForm.jifen = obj?.price || 0;

        this.descriptionTemplate = obj.describtion;
      }
    },
    submit() {
      if (this.checked) {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            apiService.post("/submit-order", { ...this.ruleForm }).then(() => {
              this.$message.success(this.$t("订单提交成功"));
              this.checked = false;
              this.ruleForm.serviceId = "";
              this.ruleForm.serviceNumber = "";
              this.ruleForm.desc = "";
              this.ruleForm.jifen = 0;
              this.$refs.ruleForm.clearValidate();
            });
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.cont {
  display: flex;
  align-items: flex-start;
  padding-top: 20px;
  padding-bottom: 40px;

  .r {
    flex: 1;
    padding-left: 20px;

    .r-01 {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .icon {
        width: 150px;
      }

      .select {
        flex: 1;
        padding-left: 10px;
      }
    }

    .r-02 {
      font-size: 16px;
      color: #666;

      span {
        color: #ff0000;
      }
    }

    .r-03 {
      margin-top: 18px;
      cursor: pointer;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-image: linear-gradient(to right, #5288e8, #105be0);
      color: #fff;

      img {
        margin-right: 10px;
      }
    }

    .r-04 {
      margin-top: 18px;
    }

    .r-05 {
      margin-top: 18px;

      .btn {
        height: 42px;
        width: 120px;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #5288e8;
        color: #fff;
      }

      .t {
        margin-top: 10px;

        &.t1 {
          color: #333;
          font-size: 14px;
        }

        &.t2 {
          color: #5288e8;
          font-size: 14px;
        }

        &.t3 {
          font-size: 16px;
          color: red;
        }
      }
    }
  }

  .l {
    width: 300px;
    flex-shrink: 0;

    .item {
      border-bottom: 1px solid #ccc;
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      color: #333;
      font-size: 14px;
      cursor: pointer;
      letter-spacing: 1px;

      &.active {
        color: #fff;
        background-color: #5288e8;
      }
    }
  }

  .m {
    width: 460px;
    flex-shrink: 0;
    padding-left: 20px;

    .item {
      background-color: #f6f9fe;
      margin-bottom: 10px;
      padding: 10px 20px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      border-radius: 4px;
      border: 1px solid transparent;

      &.active {
        border-color: #bdd0f1;
      }

      .text {
        font-size: 14px;

        .t1 {
          color: #5288e8;
        }

        .t2 {
          color: #666;
        }
      }

      .box {
        display: flex;
        align-items: center;

        .b {
          height: 30px;
          width: 80px;
          border-radius: 8px;
          font-size: 14px;
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;

          &.b1 {
            background-color: #fe5858;
          }

          &.b2 {
            background-color: #51c28f;
            margin-left: 10px;
          }
        }
      }
    }
  }
}

.search {
  margin-top: 20px;
}

.icon {
  height: 40px;
  background-image: url("@/assets/images/icon_01_03.jpg");
  background-repeat: no-repeat;
  background-position: left;
  background-size: auto 40px;
  padding-left: 30px;
  opacity: 0.8;

  span {
    color: #fff;
    background-color: #5288e8;
    display: block;
    font-size: 14px;
    border-radius: 0 10px 10px 0;
    white-space: nowrap;
  }
}

::v-deep .search .el-input__inner {
  background-color: #fafbfb;
}
</style>
